<template>
	<view class="center">
		<view class="card">
			<xbd-image-title title="近一年三重一大项目数量">
				<template>
					<view  >
						<text style="font-size: 56rpx; font-family: DIN, DIN-Bold; font-weight: 700;color: #000623;margin-right: 10rpx;">
							{{count}}
						</text>
						个
					</view>
				</template>
			</xbd-image-title>
			<view class="charts">
				<chart-line-Four :chartData="pressChart"></chart-line-Four>
			</view>
		</view>
		<view class="card">
			<xbd-image-title title="近一年三重一大占比分析">
			</xbd-image-title>
			
			<view class="charts" v-if="hackReset" >
				<chart-ring-four v-if="is_show" :chartData="securityAlarm"></chart-ring-four>
				<xbd-zwnz v-else marginTop='200'></xbd-zwnz>
			</view>
		</view>
		<view class="card">
			<xbd-image-title title="近一年三重一大合格率分析">
			</xbd-image-title>
			<view style="margin-bottom: 30rpx;" v-for="(item , index) in qualified" :key="index">
				<ai-progress :percentage="item.y*100" :line-data="true">
					<template v-slot:content>
						<view class="type">
							<text>{{item.x}}</text>
							<text>{{Math.round(item.y*100)}}%</text>
						</view>
					</template>
				</ai-progress>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		data() {
			return {
				is_show:false,
				hackReset:true,
				count: "",
				pressChart: {
					name: [ '大额资金','重大项目','重要人事', '重大决策'],
					unit: ['个', '个', '个', '个'],
					color: [ '#48BC7C', '#1EA9FB', '#FCB94F','#9486EF'],
					x: 'x',
					y: ['y', 's'],
					data: [

					]
				},
				securityAlarm: {
					unit: '次',
					data: [
					]
				},
				qualified: [
				]
			};
		},
		methods: {
			async init() {
				const res = await Prevention.getPolicyChart()
				console.log(res)
				this.pressChart.data = res.data.line.chart
				this.count = res.data.line.count
				this.securityAlarm.data = res.data.pie.map(item => {
					let o = {
						grade: item.x,
						num: item.y*100,
						const: 'const'
					}
					return o
				})
				if(this.securityAlarm.data[0].num !==0 || this.securityAlarm.data[1].num!==0 || this.securityAlarm.data[2].num!==0 || this.securityAlarm.data[3].num!==0){
					this.is_show = true
				}
				this.qualified = res.data.chart
				// 重新渲染dom节点  防止绘图出错
				          this.hackReset = false
				          this.$nextTick(()=>{
				            this.hackReset = true
				          })
			}
		},
		created() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 32rpx;

		.card {
			padding: 32rpx;
			background-color: #FFFFFF;
			margin-bottom: 32rpx;

			.charts {
				height: 500rpx;
			}

			.type {
				width: 600rpx;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #8890a5;
			}
		}
	}
</style>
